<template>
    <div class="dialog_content">
        <el-form label-position="top">
            <el-form-item :label="$t('msg.我在群里昵称')">
                <el-input v-model="displayName" :placeholder="$t('msg.请输入个人群昵称')" class="item_input"></el-input>
            </el-form-item>
        </el-form>
        <div class="footer">
            <el-button type="primary" @click="submit">{{ $t('live.确定') }}</el-button>
            <el-button type="primary" plain @click="$emit('close')">{{ $t('chat.取消') }}</el-button>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        id: {
            type: [Number, String],
            default: ""
        },
        remarkName: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            user: {},
            displayName: ""
        }
    },
    watch: {
        remarkName: {
            handler(value) {
                this.displayName = value;
            },
            immediate:true
        }
    },
    // async created() {
    //     this.displayName = this.remarkName;
    // },
    methods: {
        async submit() {
            if (!this.displayName.trim()) {
                this.$message({
                    message: this.$t('msg.请输入群聊名称'),
                    type: 'error'
                });
                return
            }

            this.$api.imApi.setChatTopAPI({
                id: this.id,
                nickname: this.displayName,
                is_group: 1
            }).then(res => {
                this.$message({
                    message: this.$t('msg.保存成功'),
                    type: 'success'
                });
                this.$emit('ok', {
                    type: "user",
                    name: this.displayName
                });
            })
        }
    }
}
</script>

<style lang="scss">
.dialog_content {
    .el-form-item {
        margin-bottom: 16px;

        .el-form-item__label {
            font-size: 14px;
            color: #7F7F7F;
            padding: 0 0 8px 0;
        }

        .item_input {
            .el-input__inner {
                height: 52px;
                font-size: 16px;
                color: #333333;
                font-weight: 500;
                background: #F5F5F5;
            }
        }
    }
}

.footer {
    .el-button {
        width: 118px;
        height: 32px;
    }
}
</style>